import React, { Component } from 'react'
import { Swiper } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import { Grid } from 'react-vant';
import axios from "../../../until/axios"
import "../../../api/index"
import {XUAN} from "../../../type/router.d"
export class Shou extends Component<XUAN> {
  state:XUAN = {
    arr: []
  }
  componentDidMount() {
    axios.get("/api/list").then((res) => {
      this.setState({
        arr: res.data.list
      })
    })
  }
  
  render() {
    const { arr } = this.state
    
    return (
      <div className='shou'>
        <div className='lbt'>
          <Swiper className="my-swipe" autoplay={3000}>
            <Swiper.Item>1</Swiper.Item>
            <Swiper.Item>2</Swiper.Item>
            <Swiper.Item>3</Swiper.Item>
            <Swiper.Item>4</Swiper.Item>
          </Swiper>
        </div>
        <div className="gg">
          <Grid columnNum={3}>
            {Array.from({ length: 6 }, (_, i) => (
              <Grid.Item key={i} icon={<ShopO />} text="文字" />
            ))}
          </Grid>
        </div>
        <div>
          {
            arr.length && arr.map((item, index) => {
              return <dl key={index}>
                <dt><img src={item.img} alt="" /></dt>
                <dd>{item.title}</dd>
              </dl>
            })
          }
        </div>
      </div>
    )
  }
}

export default Shou